<template>
	<view class="main">
		<view class="list" v-for="(item,index) in costList" :key="index">
			<view class="info_card">
				<image :src="item.imageUrl" mode="" class="photo" v-if="item.imageType == 'image'"></image>
				<video :src="item.imageUrl" class="photo" v-else></video>
				<view class="info">
					<view class="title">
						{{item.houseName}}
					</view>
					<view class="details">
						租赁时间：{{item.startTime}} 至 {{item.endTime}}
					</view>
					<view class="details">
						房租：¥{{item.price}}元/月
					</view>
					<view class="details_list">
						<text>水费：</text> <text style="color: #EE7930;width: 150rpx;">{{item.waterFee}}元/立方米</text>
						<text v-if="item.waterStatusName">状态：</text><text>{{item.waterStatusName}}</text>
						<block v-if="item.rejectReason">
						<uni-tooltip :content="item.rejectReason" placement="left">
							<text class="exclamation">!</text>
						</uni-tooltip>
						</block>
					</view>
					<view class="details_list">
						<text>电费：</text> <text style="color: #EE7930;width: 150rpx;">{{item.eleFee}}元/度</text>
						<text v-if="item.eleStatusName">状态：</text><text>{{item.eleStatusName}}</text>
						<block v-if="item.rejectReason">
						<uni-tooltip :content="item.rejectReason" placement="left">
							<text class="exclamation">!</text>
						</uni-tooltip>
						</block>
					</view>
				</view>
			</view>
			<!-- 状态:0-未缴费，1-未缴水费，2-未缴电费，3-已缴费 -->
			<view class="handle_box" v-if="item.status !=3">
				<view class="btn" @click="handleClick(item,'water')" v-if="item.status == 0 || item.status == 1">
					水费
				</view>
				<view class="btn" @click="handleClick(item,'electricity')" v-if="item.status == 0 || item.status == 2">
					电费
				</view>
			</view>
		</view>
		<!-- 	<view class="no_data" v-if="!isReach">
			～没有更多数据咯～
		</view> -->
		<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="costList.length == 0">
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit"
					style="width: 200rpx;height: 200rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		eleWaterPage
	} from './js/api.js'
	const handleClick = (item, type) => {
		console.log('点击上传水电费', type);
		uni.navigateTo({
			url: '/pagesA/addUtilityBill/addUtilityBill?id=' + item.id + '&type=' + type + '&month=' + item
				.monthNum
		})
	}
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10,
	})
	const costList = ref([])
	const isReach = ref(true)
	const getListData = async () => {
		let res = await eleWaterPage(paramsData)
		console.log(res)
		if (res.data.code == 0) {
			let list = res.data.data.list
			if (paramsData.pageNum == 1) {
				costList.value = list
			} else {
				costList.value = costList.value.concat(list)
			}
			if (list.length < 10) isReach.value = false
		}


	}
	onReachBottom(() => {
		if (!isReach.value) return
		paramsData.pageNum++
		getListData()
	})
	onShow(() => {
		paramsData.pageNum = 1
		getListData()
	})
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
	.uni-tooltip__content {
	  white-space: pre-wrap;      /* 保留空格和换行，自动换行 */
	  word-wrap: break-word;      /* 长单词自动换行 */
	  max-width: 200px;           /* 设置最大宽度，超过则换行 */
	}
	.uni-tooltip__content {
	  white-space: pre-wrap;
	  max-width: 200px;
	}
</style>
<style lang="less" scoped>
	.main {
		margin-bottom: 60rpx;
	}

	.list {
		background: #FFFFFF;
		padding: 30rpx 30rpx 0 30rpx;
		margin-top: 16rpx;
	}

	.info_card {
		display: flex;
		border-bottom: 1rpx solid #EEEEEE;

		.photo {
			height: 168rpx;
			width: 204rpx;
			margin-right: 24rpx;
		}

		.info {
			width: 460rpx;

			.title {
				font-family: PingFangSC-Semibold;
				font-size: 30rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 600;
				margin-bottom: 24rpx;
			}

			.details {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #666666;
				line-height: 26rpx;
				font-weight: 400;
				margin-bottom: 16rpx;

				.price {
					color: #EE7930;
				}

			}

			.details_list {
				display: flex;
				font-size: 24rpx;
				color: #666666;
				line-height: 26rpx;
				font-weight: 400;
				margin-bottom: 16rpx;
			}

		}
	}

	.handle_box {
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.btn {
			padding: 12rpx 16rpx;
			background: #EE7930;
			border-radius: 16rpx;
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #FFFDFC;
			text-align: center;
			font-weight: 400;
			margin-left: 32rpx;
			width: 100rpx;
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}

	.no_data {
		font-size: 24rpx;
		color: #9D9FA2;
		text-align: center;
	}
	.exclamation {
	    position: relative;
	    display: inline-block;
	    width: 32rpx;
	    height: 32rpx;
	    background-color: #f00;
	    border-radius: 50%;
	    color: white;
	    font-weight: bold;
	    text-align: center;
	    line-height: 32rpx;
	    font-size: 24rpx;
		margin-left: 24rpx;
	}
</style>